<template>
  <div class="index">
    <div class="cityList" v-show="cityListShow">
      <ul class="citySum">
        <li class="citySum-data">
          <span class="citySum-data__name"> 广西壮族自治区锚杆总数： </span>
          <span class="citySum-data__value"> 10000 </span>
        </li>
        <li class="citySum-data">
          <span class="citySum-data__name"> 在线设备数量： </span>
          <span class="citySum-data__value"> 95000 </span>
        </li>
        <li class="citySum-data">
          <span class="citySum-data__name"> 离线设备数量： </span>
          <span class="citySum-data__value citySum-data__offline"> 500 </span>
        </li>
      </ul>
      <div class="slopeList">
        <div class="onclick" @click="onclickCloseCityList()">
          <div class="onclick__text">关闭</div>
        </div>
        <ul class="slopeAreaList" v-if="areaList.length > 0">
          <li
            class="slopeArea"
            v-for="i in areaList"
            :key="i.name"
            @click="JumpToPage(i.name)"
          >
            <div class="slopeArea-data">
              <span class="slopeArea-data__name">
                {{ i.name.substring(0, i.name.length - 4) }}锚杆总数：
              </span>
              <span class="slopeArea-data__value"> 110 </span>
            </div>
            <div class="slopeArea-data">
              <span class="slopeArea-data__name"> 在线设备数量： </span>
              <span class="slopeArea-data__value"> 100 </span>
            </div>
            <div class="slopeArea-data">
              <span class="slopeArea-data__name"> 离线设备数量： </span>
              <span class="slopeArea-data__value slopeArea-data__offline">
                10
              </span>
            </div>
          </li>
        </ul>
        <div class="not-slope" v-else>
          <span class="not-slope__tip"> 该城市暂无边坡监测 </span>
        </div>
      </div>
    </div>
    <div class="light"></div>
    <chart-view
      ref="view"
      :chart-option="cityMap"
      :auto-resize="true"
      height="90%"
      width="90"
      @click="click"
    />
  </div>
</template>
<script>
import { mapData, areaData } from "../home-map/temp/data";
export default {
  name: "index",
  data() {
    return {
      cityMap: {},
      cityList: [],
      areaList: [],
      cityListShow: false,
      cityName: "",
    };
  },
  /**所有方法*/
  methods: {
    click(param) {
      console.log(param);
      if (param.componentSubType == "effectScatter") {
        this.JumpToPage(param.name);
      } else if (param.componentSubType == "map") {
        console.log(this.cityName, param.name);
        if (param.name == this.cityName) {
          this.onclickCloseCityList();
        } else {
          this.cityListShow = true;
          this.cityName = param.name;
          this.areaList = areaData(param.data.code);
        }
      }
    },

    JumpToPage(param) {
      this.$router.push({ path: "soleHome", query: { name: param } });
    },

    onclickCloseCityList() {
      this.$refs.view.cancelSelectMode(this.cityName);
      this.cityListShow = false;
      this.cityName = "";
    },
  },
  computed: {
    hospitalStatusPictureInit() {
      return this.$echarts.init(document.getElementById("mapChart"));
    },
  },
  created() {
    this.cityList = mapData();
    this.areaList = areaData();
    this.cityMap = this.$eChartFn.guangxi3DMap(this.cityList, this.areaList);
  },
};
</script>

<style scoped lang='less'>
/* @import url(); 引入css类 */

.index {
  width: 100%;
  height: 100%;
  position: relative;
}
.light {
  position: absolute;
  left: 25%;
  top: 25%;
  width: 50%;
  height: 50%;
  z-index: 2023;
  background: url("/static/img/slope/mapLight.png") center no-repeat;
  pointer-events: none;
}
/deep/ .ui-area-content {
  font-size: 15px;
  font-weight: 600;
  padding-top: 1vh;
  &__name {
    font-size: 13px;
    font-weight: 400;
  }
}

.cityList {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  width: 30%;
  height: 90%;
  z-index: 2024;
  left: 35%;

  .citySum {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    width: 80%;
    height: 20%;
    background: url("/static/img/slope/cityBackgroun.png") center no-repeat;
    background-size: 100% 100%;

    .citySum-data {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 20%;
      width: 80%;

      &__name {
        font-size: 1rem;
        color: #fff;
      }

      &__value {
        font-size: 1rem;
        color: #25c8ff;
      }

      &__offline {
        color: #fe2727;
        font-size: 800;
      }
    }
  }

  .slopeList {
    width: 80%;
    height: 70%;
    border-radius: 15px;
    background: #0a2a44dd;

    .onclick {
      margin-top: 5%;
      width: 100%;
      height: 5%;
      &__text {
        width: 10%;
        height: 100%;
        margin-left: 85%;
        font-size: 1rem;
        color: #eee;
        cursor: pointer;
      }

      &__text:hover {
        color: #53d5ff;
      }
    }

    .slopeAreaList {
      height: 90%;
      width: 100%;
      overflow-y: auto;

      .slopeArea {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        width: 90%;
        height: 20%;
        margin-left: 5%;
        margin-bottom: 0.5vh;
        background: url("/static/img/slope/cityBackgroun.png") center no-repeat;
        background-size: 100% 100%;

        .slopeArea-data {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 20%;
          width: 100%;
          cursor: pointer;

          &__name {
            font-size: 1rem;
            color: #fff;
          }

          &__value {
            font-size: 1rem;
            color: #25c8ff;
          }

          &__offline {
            color: #fe2727;
            font-size: 800;
          }
        }
      }


    }

    .not-slope {
      height: 90%;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      &__tip {
        font-size: 1.625rem;
        color: #eee;
      }
    }
  }

  .slopeAreaList::-webkit-scrollbar {
    width: 0px;
  }
}
</style>

